<template>
  <view>
    <u-navbar auto-back title="提现" placeholder></u-navbar>
    <view class="px-12">
      <view class="card">
        <u-alert
          type="warning"
          description="* 绑定银行卡后,将提现至该账户"
        ></u-alert>
        <view class="color-black">
          <view class="text-16 py-12">银行信息</view>
          <view class="text-14 py-12">持卡人</view>
          <u-input placeholder="请填写"></u-input>
          <view class="text-14 py-12">银行卡号</view>
          <u-input placeholder="请填写"></u-input>
          <view class="text-14 py-12">开户银行</view>
          <view @click="show = true">
            <u-input placeholder="请选择" readonly></u-input>
          </view>
        </view>
      </view>
    </view>
    <view class="page-foot px-24 pt-6">
      <u-button type="primary" shape="circle" text="确认更换"></u-button>
    </view>
    <u-picker
      :show="show"
      @close="close"
      closeOnClickOverlay
      @cancel="close"
      :columns="columns"
      @confirm="confirmBankCard"
      confirmColor="#5db292"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      withdrawalMethodShow: true,
      columns: [["工商银行", "建设银行", "农业银行", "交通银行"]],
    };
  },
  methods: {
    close() {
      this.show = false;
    },
    confirmBankCard(val) {
      console.log("选择银行卡确定", val);
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.card {
  margin-top: 24rpx;
  width: 702rpx;
  box-sizing: border-box;
  padding: 24rpx;
  background: #fff;
  box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
  border-radius: 8rpx;
}
.page-foot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 34px;
  background: #fff;
}
</style>
